<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script src="d3.js"></script>
    <script>
        const svg = d3.select('body').append('svg');
        svg.attr('width',800);
        svg.attr('height',600);
        svg.style('border','2px solid #ccc');
        
        // 示例连接数据
        const data1 = [
            {date:'2020',type:'专科',count:100},
            {date:'2020',type:'普本',count:200},
            {date:'2020',type:'重本',count:80},
            {date:'2021',type:'专科',count:200},
            {date:'2021',type:'普本',count:200},
            {date:'2021',type:'重本',count:180},
            {date:'2022',type:'专科',count:80},
            {date:'2022',type:'普本',count:100},
            {date:'2022',type:'重本',count:280},
            {date:'2023',type:'专科',count:50},
            {date:'2023',type:'普本',count:40},
            {date:'2023',type:'重本',count:100}
        ] ;
        const data2 = d3.index(data1,d=>d.date , d=>d.type) ;
        
        const keys = d3.union(data1.map(d=>d.type)) ;

        const stack = d3.stack()
            .keys(Array.from(keys))
            .value(function([,group],key){
                return group.get(key).count;
            })
            .order(d3.stackOrderAppearance)

        const data3 = stack(data2);


        //绘制
        const xScale = d3.scaleBand()
            .domain(data2.keys())
            .range([0,600])
            .padding(0.5)
            .round(true);

        const yScale = d3.scaleLinear()
            .domain([0,d3.max(data3,d=>d3.max(d,sub=>sub[1]))])
            .range([500,0])
            .nice()    

        const colorScale = d3.scaleOrdinal()
            .domain(keys)
            .range(d3.schemeSet3);


        const g = svg.append('g')    
            .attr('transform','translate(50,50)');
        
        const xAxis = d3.axisBottom(xScale);
        g.append('g')
            .attr('transform','translate(0,500)')
            .call(xAxis);

        const yAxis = d3.axisLeft(yScale);
        g.append('g')
            .call(yAxis)    


        g.append('g').selectAll('g')
            .data(data3)
            .join('g')
            .attr('fill',d=>colorScale(d.key))
                .selectAll('rect')
                .data(d=>d)
                .join('rect')
                    .attr('y',d=>yScale(d[1]))
                    .attr('x',d=>xScale(d.data[0]))
                    .attr('width',xScale.bandwidth())
                    .attr('height',d=>yScale(d[0])-yScale(d[1]));


        const yScale2 = d3.scaleBand()
            .domain(keys)
            .range([460,370])
            .padding(0.2);

        const g2 = svg.append('g')
            .attr('transform','translate(670,100)')
            
        g2.selectAll('g')
            .data(keys)
            .join('g')
            .append('rect')
            .attr('x',0)
            .attr('y',d=>yScale2(d))
            .attr('width',50)
            .attr('height',yScale2.bandwidth())
            .attr('fill',d=>colorScale(d));

        g2.selectAll('text')
            .data(keys)
            .join('text')
            .attr('x',55)
            .attr('y',d=>yScale2(d)+16)
            .attr('stroke','#666')
            .attr('font-size',12)
            .attr('letter-spacing',4)
            .text(d=>d);


    </script>
</body>
</html>